<!--
 * @FileDescription:
 * @Author: 茆生涛
 * @Date: 2021-07-20 15:55:01
 * @LastEditors: 茆生涛
 * @LastEditTime: 2021-07-26 18:00:58
-->
<template>
  <div class="login">
    <div class="login-box">
      <div class="login-box-name">
        随机菜单登录
      </div>
      <el-form
        :model="loginValidateForm"
        ref="loginValidateForm"
        label-width="56px"
        class="demo-dynamic"
      >
        <el-form-item
          prop="name"
          label="昵称"
          :rules="[{ required: true, message: '请输入昵称', trigger: 'blur' }]"
        >
          <el-input v-model="loginValidateForm.name"></el-input>
        </el-form-item>
        <el-form-item
          prop="password"
          label="密码"
          :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
        >
          <el-input type='password' v-model="loginValidateForm.password"></el-input>
        </el-form-item>
        <el-form-item class="login-btn-box">
          <el-button
            type="primary"
            @keyup.enter.native="submitForm('loginValidateForm')"
            @click="submitForm('loginValidateForm')"
            >确定</el-button
          >
          <el-button @click="resetForm('loginValidateForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Md5 from '@/utils/md5'
export default {
  name: 'login',
  data () {
    return {
      loginValidateForm: {
        name: '',
        password: ''
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid, obj) => {
        if (valid) {
          this.checkLogin()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    checkLogin () {
      if (
        this.loginValidateForm.name === 'ml' &&
        this.loginValidateForm.password === '123456'
      ) {
        localStorage.setItem(
          'randomMenuUser',
          JSON.stringify({ name: 'ml', password: Md5('123456', 'm', true) })
        )
        this.$message.success('登录成功')
        this.$router.push('/')
      } else {
        this.$message.error('昵称或密码错误')
      }
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  background-image: url("http://lorempixel.com/1920/1080/");
  background-size: 100% 100%;
  position: relative;
  .login-box {
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    padding: 16px;
    position: absolute;
    width: 305px;
    height: 246px;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    .login-box-name {
      font-size: 24px;
      line-height: 40px;
      font-weight: 600;
      margin-bottom: 24px;
    }
    .login-btn-box {
      .el-form-item__content {
        margin-left: 10px !important;
      }
    }
  }
}
</style>
